<!--
 * @Author: guxf
 * @Date: 2021-11-21 12:33:47
 * @Description: 我的订单
-->
<template>
	<view class="x-content-background order">
		<view class="tab">
			<u-tabs :current="current" :list="tabs" lineWidth="26" @click="chengeTabs"
				:lineColor="xThemeColor()"></u-tabs>
		</view>
		<skeleton-order v-if="isLoading" />
		<template v-show="!isLoading">
			<view v-if="userOrderList && userOrderList.length>0"
				:style="{padding:'55px 10px 60px 10px;', 'min-height':(device.windowHeight-55)+'px;'}">
				<view v-for="(item, index) in userOrderList" :key="index" class="order-item" @click="toDetail(item)">
					<view class="goods-item" v-for="i in item.orderDetailEntityList" :key="i.id">
						<x-image class="x-image" :src="`${imageUrl}${i.picturePath}`"></x-image>
						<view class="info">
							<view class="name x-text-multi">{{i.goodsNormName}}</view>
							<view class="unit" v-if="i.unit && i.unit.length>0">单位:{{i.unit}}</view>
							<view class="price-and-num">
								<text class="price">单价:￥{{ i.price}}</text>
								<view class="num">x{{i.quantity}}</view>
							</view>
						</view>
					</view>
					<view class="list_item_info">
						<view class="item_time">{{item.createTime}}</view>
						<view class="item_status">
							<u--text type="warning" text="未支付" v-if="item.status == 10" size="12"></u--text>
							<u--text type="warning" text="待发货" v-if="item.status == 20" size="12"></u--text>
							<u--text type="primary" text="待收货" v-if="item.status == 30" size="12"></u--text>
							<u--text type="success" text="已完成" v-if="item.status == 40" size="12"></u--text>
							<u--text type="primary" text="已完成" v-if="item.status == 50" size="12"></u--text>
						</view>
					</view>

					<view style="padding: 0px 10px 10px;">
						<u-row justify="flex-end" gutter="5">
							<u-col span="2.7" v-if="item.status == 10">
								<view @click.stop="toPay(item)">
									<button class="pay-btn x-btn">去支付</button>
								</view>
							</u-col>
							<u-col span="2.7" v-if="item.status == 10">
								<view @click.stop="cancelOrder(item.id)">
									<u-button :plain="true" size="small" shape="circle" text="取消订单"></u-button>
								</view>
							</u-col>
							<u-col span="2.7" v-if="item.status == 30">
								<view @click.stop="enterOrder(item.id)">
									<u-button :plain="true" size="small" shape="circle" text="确认收货"></u-button>
								</view>
							</u-col>
							<u-col span="2.7" v-if="item.status == 50">
								<view @click.stop="delOrder(item)">
									<u-button v-if="item.status == 50" :plain="true" size="small" shape="circle"
										text="删除订单"></u-button>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>

			<view class="no_data" v-if="userOrderList.length !==0&&isLastPage">
				已经到底了~
			</view>

			<view v-if="userOrderList.length ===0" :style="'min-height:'+(device.windowHeight)+'px;' ">
				<u-empty marginTop="55" mode="list"></u-empty>
			</view>

		</template>
		<template v-if="isLoading && userOrderList.length > 0 && !isLastPage">
			<view class="loading">正在加载中...</view>
		</template>
	</view>
</template>

<script>
	import config from '@/config';
	import {
		cancelOrderById,
		deleteById
	} from '@/api/mine.js';
	import {
		finishHandle,
		page,
		subOrder
	} from '@/api/order.js';
	import skeletonOrder from '@/components/skeleton/order'
	import {
		mapState
	} from 'vuex'
	import XImage from '@/components/image/xImage.vue'
	import {
		ThemeMixin
	} from '@/mixins/theme/xThemeMixin.js'

	export default {
		name: 'myorderList',
		mixins: [ThemeMixin],
		components: {
			skeletonOrder,
			XImage,
		},
		computed: {
			...mapState(['device'])
		},
		data() {
			return {
				imageUrl: config.imageUrl, //
				// 用户订单列表
				userOrderList: [],
				current: 0,
				tabs: [{
					name: '全部'
				}, {
					name: '未支付'
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}],
				isLoading: false,
				page: 1,
				isLastPage: false,
			};
		},
		created() {},
		onShow(e) {},
		onLoad(e) {
			this.current = e.tabIndex || 0;
			this.getUserOrder(this.current);
		},
		onReachBottom() {
			if (this.isLastPage) {
				return false;
			}
			this.page++;
			this.getUserOrder();
		},
		methods: {
			onImgError(index) {
				this.goodsList[index].picturePath = '';
				console.log(index, this.goodsList[index]);
			},
			toPay(e) {
				uni.navigateTo({
					url: `/pages/index/subOrder?id=${e.id}`,
					
				});
			},
			// 删除已取消订单
			delOrder(e) {
				uni.showModal({
					title: '提示',
					content: '确定删除这项订单？',
					success: res => {
						if (res.confirm) {
							deleteById(e.id).then(res => {
								const newOrder = this.userOrderList.filter(i => {
									return i.id !== e.id
								})
								this.userOrderList = newOrder
							});
						}
					}
				});
			},
			// 用户订单信息
			getUserOrder(val) {
				this.isLoading = true;
				const query = {
					pageNo: this.page,
					pageSize: 10,
					pageNum: this.page,
					search: {
						status:this.current==0?-1: this.current + '0'
					}
				}
				page(query).then(res => {
					// setTimeout(()=>{
					let curList = res.list
					for(let i=0; i<curList.length; ++i) {
						let orderItem = curList[i]
						for(let j=0; j<orderItem.detailList?.length; ++j) {
							let detailItem = orderItem.detailList[j]
							if(orderItem.status == 10) {
								// 对于还未支付的订单
								detailItem.price = detailItem.goodsPrice //用商品的最新价格更新订单详情记录下单价钱
							}
						}
					}
					
					
					this.userOrderList = this.userOrderList.concat(res.list);
					this.isLoading = false;
					this.isLastPage = res.isLastPage;
					// }, 2000)
				});
			},
			copyCode(e) {
				uni.setClipboardData({
					data: e,
					success() {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			//获取点击状态
			chengeTabs(val) {
				// this.status = val.index + '0';
				this.page = 1
				this.userOrderList = new Array()
				this.current = val.index;
				this.getUserOrder(val.index);
			},
			// 取消订单
			cancelOrder(val) {
				//TODO
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单？',
					success: res => {
						if (res.confirm) {
							cancelOrderById(val).then(res => {
								const newOrder = this.userOrderList.filter(i => {
									return i.id !== val
								})
								// this.getUserOrder(1);
								this.userOrderList = newOrder
							});
						}
					}
				});
			},
			enterOrder(val) {
				//TODO
				uni.showModal({
					title: '提示',
					content: '确定完成该订单？',
					success: res => {
						if (res.confirm) {
							finishHandle(val).then(res => {
								const newOrder = this.userOrderList.filter(i => {
									return i.id !== val
								})
								this.userOrderList = newOrder
							});
						}
					}
				});
			},
			// 更换地址
			goAddress() {
				uni.navigateTo({
					url: '/pages/mine/address/index'
				});
			},
			toDetail(item) {
				if(item.status == 10) {
					return ; //未支付状态订单，不需要查看详情
				}
				const info = new Object();
				info.clientAddressId = item.clientAddressId;
				info.clientId = item.clientId;
				info.orders = new Array();
				info.invoiceId = item.invoiceId
				info.orders.push(e)
				uni.navigateTo({
					url: `/pages/mine/order/detail?info=${JSON.stringify(info)}&totalAmount=${e.detailList[0].price}`
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
	$secondary-color: #999;

	.order {
		min-height: 100%;
	}

	.order-item {
		border-radius: 6px;
		background-color: #fff;
		margin-bottom: 8px;

		.goods-item {
			padding: 20rpx;
			display: flex;

			.x-image {
				// width: 100%;
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
				overflow: hidden;
			}

			.info {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				justify-content: space-between;
				flex: 1;

				.name {
					font-size: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					padding-top: 10rpx;
					font-weight: bold;
				}
				
				.unit {
					margin-top: 10rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: $secondary-color;
				}

				.price-and-num {
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;
					align-items: baseline;

					.price {
						font-size: 32rpx;
						font-weight: bold;
						color: #e51c23;
					}

					.num {
						font-size: 32rpx;
					}
				}

			}

		}

		.list_item_info {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			margin: 20rpx;

			// padding: 0 20rpx;
			.item_time {
				color: $secondary-color;
			}
		}
	}

	.no_data {
		text-align: center;
		margin: 20rpx auto;
		color: black;
	}

	.tab {
		margin-top: 0px;
		padding: 0 10rpx;
		align-items: center;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: #fff;
		border-bottom: 10px solid #F1F1F1;
		border-top: 1px solid #F1F1F1;
		width: 100%;
	}

	.loading {
		text-align: center;
		color: black;
		padding-bottom: 100rpx;
	}
	
	.pay-btn {
		border-radius: 27rpx;
		height: 54rpx;
	}
</style>